<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
    <title>debounce</title>
    <style>
        #container {
            width: 100%;
            height: 200px;
            line-height: 200px;
            text-align: center;
            color: #fff;
            background-color: #444;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <script src="debounce.js"></script>
    <script>
        var str = '/index/'
        var a = str.charAt(str.length - 1)
        console.log(a)
        // 使用时间戳，设定一个 previous ,最开始为0，新建一个 now 为点击时的时间，如果 现在的时间减去以前的时间，大于设定的时间，就执行func

        const throttle = function (func, time) {

            return function () {
                let context = this
                let previous = 0
                let now = +new Date()
                let args = arguments
                if (now - previous > time) {
                    func.apply(context, args)
                    previous = now
                }
            }
        }

        // 使用定时器,当触发事件的时候我们设定一个定时器，只要定时器存在我们就不执行，直到定时器执行，清除定时器，然后执行函数。

        function thorttle(func, wait) {
            let timeout;
            let context;
            let args;
            return function () {
                context = this
                args = arguments
                if (!timeout) {
                    timeout = setTimeout(function () {
                        timeout = null;
                        func.apply(context, args)

                    }, wait)
                }
            }

        }

        function debounce(func,wait) {
            var timer;
            var context;
            var args
          return function() {
              clearTimeout(timer)
              timer = setTimeout(function() {
                func.apply(context,args)
              },wait)
          }
        
        }

    </script>
</body>

</html>